Query Parameters এর মাধ্যমে ডেটা পাস করা

Query Parameters হল URL-এর অংশ যা ক্লায়েন্ট থেকে সার্ভারে ডেটা প্রেরণের জন্য ব্যবহৃত হয়। Ember.js এ, আপনি Query Parameters এর মাধ্যমে অ্যাপ্লিকেশন রাউটের মধ্যে ডেটা পাস করতে পারেন, যা URL থেকে ডেটা রিট্রিভ করতে এবং অ্যাপ্লিকেশনের মধ্যে পারামিটারভিত্তিক নেভিগেশন করতে সাহায্য করে।

Query Parameters সাধারণত URL-এর শেষে ?key=value ফরম্যাটে থাকে এবং একাধিক প্যারামিটার একে অপরকে & চিহ্ন দ্বারা পৃথক করা হয়। Ember.js রাউটিং সিস্টেমে, Query Parameters ব্যবহার করে রাউটের মধ্যে ডেটা পাস করার জন্য একটি সরল এবং কার্যকরী পদ্ধতি উপলব্ধ।

Query Parameters এর মাধ্যমে ডেটা পাস করা

Ember.js এ Query Parameters পাস করার জন্য প্রথমে রাউটের কনফিগারেশন করতে হয় এবং তারপর সেই প্যারামিটারগুলো কন্ট্রোলার বা মডেল লেয়ার থেকে অ্যাক্সেস করা হয়। এখানে একটি সহজ উদাহরণ দেখানো হলো কিভাবে আপনি Query Parameters এর মাধ্যমে ডেটা পাস করতে পারেন।

১. Router এ Query Parameter কনফিগার করা

প্রথমে, আপনাকে Router এ Query Parameters কনফিগার করতে হবে, যা URL থেকে ডেটা গ্রহণ করবে। উদাহরণস্বরূপ, ধরুন আমাদের একটি products রাউট রয়েছে, যেখানে আমরা category নামক একটি query parameter পাস করতে চাই।

app/router.js:

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('products', { path: '/products' });
});

export default Router;

এখানে, products রাউটকে URL /products এ সংজ্ঞায়িত করা হয়েছে।

২. Route-এ Query Parameter গ্রহণ করা

এখন, আপনাকে Route-এ Query Parameters গ্রহণ করতে হবে। এর জন্য queryParams প্রপার্টি ব্যবহার করা হয়। যখনই query parameter পরিবর্তিত হয়, তখন model hook বা setupController-এ তা অ্যাক্সেস করা যায়।

app/routes/products.js:

import Route from '@ember/routing/route';

export default class ProductsRoute extends Route {
  queryParams = {
    category: {
      refreshModel: true
    }
  };

  model(params) {
    // 'category' query parameter গ্রহন করা হয়েছে
    console.log('Category:', params.category);
    // এখানে আপনার ডেটা ফেচিং লজিক রাখুন
    return { category: params.category };
  }
}

এখানে, queryParams প্রপার্টি দ্বারা category প্যারামিটারটি গ্রহণ করা হয়েছে। refreshModel: true মানে হল যে যখনই category পরিবর্তিত হবে, তখন মডেল পুনরায় লোড হবে।

৩. Controller এ Query Parameter ব্যবহার

এখন, আপনি Controller-এ প্যারামিটারটি ব্যবহার করতে পারেন। এটি আপনি ব্যবহারকারী ইন্টারফেসে ডেটা প্রদর্শন করতে বা কোনো ফিল্টারিং লজিক তৈরি করতে ব্যবহার করতে পারেন।

app/controllers/products.js:

import Controller from '@ember/controller';

export default class ProductsController extends Controller {
  queryParams = ['category']; // Query parameter অ্যাক্সেস করা

  category = null;  // Default value

  // অন্যান্য কন্ট্রোলার লজিক এখানে যোগ করা যেতে পারে
}

এখানে, category প্যারামিটারটি কন্ট্রোলারে অ্যাক্সেস করা হয়েছে, যা UI বা ফিল্টারিং উদ্দেশ্যে ব্যবহৃত হতে পারে।

৪. Query Parameter সহ URL তৈরি করা

এখন, আপনাকে একটি লিঙ্ক তৈরি করতে হবে যেখানে category প্যারামিটারটি URL-এ যুক্ত হবে। Ember.js এর LinkTo কম্পোনেন্ট ব্যবহার করে আপনি query parameters সহ URL তৈরি করতে পারেন।

app/templates/products.hbs:

<h1>Products</h1>

<!-- Category ফিল্টার -->
<button {{action 'filterByCategory' 'electronics'}}>Electronics</button>
<button {{action 'filterByCategory' 'fashion'}}>Fashion</button>

<ul>
  {{#each model as |product|}}
    <li>{{product.name}}</li>
  {{/each}}
</ul>

এখানে, দুটি বাটন রয়েছে যা filterByCategory অ্যাকশনটিকে কল করে। আপনি action ব্যবহার করে category প্যারামিটারটি পরিবর্তন করতে পারেন।

app/controllers/products.js (অ্যাকশন):

import Controller from '@ember/controller';

export default class ProductsController extends Controller {
  queryParams = ['category'];
  category = null;

  actions: {
    filterByCategory(category) {
      this.set('category', category);
      // URL এ category প্যারামিটার যুক্ত হবে
      this.transitionToRoute({ queryParams: { category: category } });
    }
  }
}

এখানে, filterByCategory অ্যাকশন category প্যারামিটারটি সেট করে এবং transitionToRoute ব্যবহার করে নতুন URL-এ প্যারামিটার সহ রাউটের জন্য নেভিগেট করে।

৫. Query Parameter পরিবর্তন এবং রিফ্রেশ

যখনই category পরিবর্তিত হবে, model hook বা setupController পুনরায় কল হবে। এটি আপনাকে queryParams এর মাধ্যমে ডেটা ফেচিং এবং নেভিগেশনকে আরও গতিশীল এবং ইন্টারঅ্যাক্টিভ করতে সাহায্য করে।

Ember.js এ Query Parameters ব্যবহার করে URL-এর মাধ্যমে ডেটা পাস করা একটি শক্তিশালী বৈশিষ্ট্য যা আপনাকে বিভিন্ন ভিউ বা কম্পোনেন্টের মধ্যে ডেটা শেয়ার করতে এবং URL-এ ডেটা প্রদর্শন করতে সাহায্য করে। queryParams এবং transitionToRoute ব্যবহার করে আপনি সহজেই পারামিটার পাস করতে এবং অ্যাপ্লিকেশনের আচরণ কাস্টমাইজ করতে পারেন।